<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="smart-icon"
  >
    <!-- 机器人头部 -->
    <rect
      x="18"
      y="18"
      width="28"
      height="26"
      rx="6"
      fill="url(#smart-gradient-head)"
    />
    <!-- 天线 -->
    <rect
      x="31"
      y="12"
      width="2"
      height="6"
      fill="#4facfe"
    />
    <circle
      cx="32"
      cy="10"
      r="3"
      fill="#FFD700"
    />
    <!-- 左眼 -->
    <circle
      cx="26"
      cy="28"
      r="4"
      fill="white"
    />
    <circle
      cx="27"
      cy="28"
      r="2"
      fill="#4facfe"
    />
    <!-- 右眼 -->
    <circle
      cx="38"
      cy="28"
      r="4"
      fill="white"
    />
    <circle
      cx="39"
      cy="28"
      r="2"
      fill="#4facfe"
    />
    <!-- 嘴巴 -->
    <path
      d="M26 36C26 36 29 39 32 39C35 39 38 36 38 36"
      stroke="white"
      stroke-width="2"
      stroke-linecap="round"
    />
    <!-- 左耳 -->
    <rect
      x="14"
      y="26"
      width="4"
      height="8"
      rx="2"
      fill="url(#smart-gradient-ear)"
    />
    <!-- 右耳 -->
    <rect
      x="46"
      y="26"
      width="4"
      height="8"
      rx="2"
      fill="url(#smart-gradient-ear)"
    />
    <!-- 身体 -->
    <rect
      x="20"
      y="44"
      width="24"
      height="12"
      rx="4"
      fill="url(#smart-gradient-body)"
    />
    <!-- 控制面板装饰 -->
    <circle cx="28" cy="50" r="2" fill="#FFD700" opacity="0.8" />
    <circle cx="32" cy="50" r="2" fill="#00f2fe" opacity="0.8" />
    <circle cx="36" cy="50" r="2" fill="#7ee8fa" opacity="0.8" />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="smart-gradient-head" x1="18" y1="18" x2="46" y2="44" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="100%" stop-color="#00f2fe" />
      </linearGradient>
      <linearGradient id="smart-gradient-ear" x1="14" y1="26" x2="18" y2="34" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#7ee8fa" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="smart-gradient-body" x1="20" y1="44" x2="44" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.smart-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.smart-icon:hover {
  transform: scale(1.05) rotate(-3deg);
}
</style>
